<template>
    <div>
        <van-nav-bar title="消息" />
        <div class="message-div">
            <div class="flex" @click="$router.push(`/message/chat/${item.toUsername}?chatId=${item.id}`)" v-for="item, index in chatList" :key="index">
                <div class="image">
                    <van-image height="50px" round
                        :src="item.toAvatar" />
                </div>
                <div class="content">
                    <div class="title">
                        <span>{{ item.toName }}</span>
                    </div>
                    <div class="main">
                        <span>{{ item.lastMsg }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Message',
    mounted() {
        this.getChatList();
    },
    methods: {
        // 获取聊天列表
        async getChatList() {
            let res = await this.$store.dispatch("getChatList")
            if (!res.success) this.$myfun.resError(res)
        },
    },
    computed: {
        chatList() {
            return this.$store.state.chat.chatList
        }
    }
}
</script>

<style scoped>
.message-div {
    width: 95%;
    margin: 0 auto;
}

.title {
    font-size: 0.9rem;
    font-weight: 550;
}

.flex {
    display: flex;
    align-items: center;
    height: 60px;
}

.image {
    width: 15%;
    text-align: center;
}

.content {
    margin-left: 15px;
    margin-right: 15px;
}

.main {
    color: gray;
    font-size: 0.8rem;
}
</style>